<template>
  <div class="search-bar">
    <div class="select-bar" style="margin-bottom: 20px">
      <div class="select-item">
        <label for="esTitle-input">消息标题：</label>
        <input
          id="esTitle-input"
          placeholder="输入消息标题"
          v-model="queryInfo.esTitle"
          class="input-field"
          style="height: 30px"
        />
      </div>

      <div class="select-item">
        <label for="esContent-input">发送内容：</label>
        <input
          id="esContent-input"
          placeholder="输入发送内容"
          v-model="queryInfo.esContent"
          class="input-field"
          style="height: 30px"
        />
      </div>
      <el-button type="primary" @click="getGongYing()" class="search-button">
        <i class="fas fa-search"></i>查询
      </el-button>
      <el-button type="primary" @click="handleReset" class="reset-button">
        <i class="fas fa-undo"></i>重置
      </el-button>
      <el-button type="default" @click="toggleExpand" class="toggle-button">
        {{ isExpanded ? "收起" : "展开" }}
        <i :class="isExpanded ? 'fas fa-angle-up' : 'fas fa-angle-down'"></i>
      </el-button>
      <div v-if="isExpanded" class="expand-content">
        <div class="select-item" style="display: inline-block">
          <label for="esReceiver-input">接收人：</label>
          <input
            id="esReceiver-input"
            placeholder="输入接收人"
            v-model="queryInfo.esReceiver"
            class="input-field"
            style="display: inline-block; height: 30px; margin-top: 15px"
          />
        </div>
      </div>
      <!-- 新增批量删除按钮 -->
      <el-dropdown size="small" v-if="selectedRows.length > 0">
        <span class="el-dropdown-link" style="color: #1890ff">
          批量操作<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-button
            type="text"
            style="color: rgba(0, 0, 0, 0.65); margin: 0 5px"
            @click="batchDelete"
            ><i class="fas fa-trash"></i>
            删除
          </el-button>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <p>
      已选择<span style="color: #1890ff">{{ selectedRows.length }}</span
      >项
      <el-button
        type="text"
        @click="handleReset"
        class="reset-button"
        style="border: none; color: #1890ff; background-color: #e6f7ff"
      >
        清空
      </el-button>
    </p>
    <el-table
      :data="list"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="#" type="index" width="50"></el-table-column>
      <el-table-column
        label="消息标题"
        width="120"
        prop="esTitle"
      ></el-table-column>
      <el-table-column label="发送内容" prop="esContent"></el-table-column>
      <el-table-column label="接收人" prop="esReceiver"></el-table-column>
      <el-table-column label="发送次数" prop="esSendNum"></el-table-column>
      <el-table-column
        label="发送状态"
        prop="esSendStatus_dictText"
      ></el-table-column>
      <el-table-column label="发送时间" prop="updateTime"></el-table-column>
      <el-table-column
        label="发送方式"
        prop="esType_dictText"
      ></el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            style="color: #1890ff"
            @click="handleEdit(scope.row)"
            >详情</el-button
          >
          <span style="color: #bbb; margin-right: 3px">|</span>
          <el-dropdown size="small">
            <span class="el-dropdown-link" style="color: #1890ff">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-button
                size="mini"
                type="text"
                style="color: rgba(0, 0, 0, 0.65); margin: 0 5px"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加或者修改募捐团队模态框 -->
    <el-drawer
      title="详情"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-form
        :model="listForm"
        :rules="rules"
        ref="listForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="消息标题" prop="esTitle">
          <el-input v-model="listForm.esTitle"></el-input>
        </el-form-item>
        <el-form-item label="发送内容" prop="esContent">
          <el-input v-model="listForm.esContent"></el-input>
        </el-form-item>
        <el-form-item
          label="发送所需要的参数"
          prop="esSendParam"
          placeholder="请输入发送所需的JSON格式"
        >
          <el-input v-model="listForm.esSendParam"></el-input>
        </el-form-item>
        <el-form-item label="接收人" prop="esReceiver">
          <el-input v-model="listForm.esReceiver"></el-input>
        </el-form-item>
        <el-form-item
          label="发送方式"
          style="display: block; margin-bottom: 15px"
        >
          <el-select v-model="listForm.esType" placeholder="请选择发送方式">
            <el-option
              v-for="(item, index) in fangshi"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发送时间" prop="updateTime">
          <el-date-picker
            v-model="listForm.updateTime"
            type="datetime"
            placeholder="选择发送时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发送状态">
          <el-select
            v-model="listForm.esSendStatus"
            placeholder="请选择发送状态"
          >
            <el-option
              v-for="(item, index) in enable"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发送次数" prop="esSendNum">
          <el-input v-model="listForm.esSendNum"></el-input>
        </el-form-item>
        <el-form-item label="发送失败原因" prop="esSendFailReason">
          <el-input v-model="listForm.createBy"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="listForm.remark"></el-input>
        </el-form-item>
      </el-form>
    </el-drawer>

    <pagination
      :page="queryInfo.pageNo"
      :componentTotal="total"
      @changeRows="setPageSize"
      @changePage="setPageNo"
    ></pagination>
  </div>
</template>

<script>
import { Button } from "element-ui";
import axios from "axios";
import Pagination from "../Pagination.vue";

export default {
  components: {
    "el-button": Button,
    Pagination,
  },
  data() {
    return {
      search1: "", // 用于存储编码
      search2: "", // 用于存储名称
      isExpanded: false, // 控制展开/收起的状态
      direction: "rtl",
      queryInfo: {
        _t: "",
        column: "createTime",
        order: "desc",
        field:
          "id,,,esTitle,esContent,esReceiver,esSendNum,esSendStatus_dictText,esSendTime,esType_dictText,action",
        pageNo: 1,
        pageSize: 10,
      },
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      list: [],
      total: 0, // 用于存储总数
      loading: false, // 加载状态
      listForm: {
        createBy: "",
        createTime: "",
        esContent: "",
        esParam: "",
        esReceiver: "",
        esResult: "",
        esSendNum: "",
        esSendStatus: "",
        esSendStatus_dictText: "",
        esSendTime: "",
        esTitle: "",
        esType: "",
        esType_dictText: "",
        id: "",
        remark: "",
        updateBy: "",
        updateTime: "",
      },
      drawer: false,
      id: null,
      options: [],
      rules: {
        code: [{ required: true, message: "请输入随访编码", trigger: "blur" }],
      },
      fangshi: [
        { label: "系统", value: "0" },
        { label: "短信", value: "1" },
        { label: "邮箱", value: "2" },
        { label: "微信", value: "3" },
      ],
      enable: [
        { label: "发送成功", value: "1" },
        { label: "发送失败", value: "2" },
      ],
      // 新增用于存储选中行的数组和选中数量
      selectedRows: [],
      selectedCount: 0,
    };
  },
  mounted() {
    this.getGongYing(); // 在组件加载时获取数据
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    // 编辑任务handleExceed
    async handleEdit(row) {
      this.listForm = { ...row };
      this.drawer = true;
      this.id = row.id;
    },
    //取消重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.drawer = false;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    // 删除任务
    handleDelete(row) {
      console.log(row);
      this.$confirm("是否删除该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteSamplereport(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async deleteSamplereport(id) {
      await this.axios
        .delete(
          `http://8.142.74.15:48082/jeecg-boot/message/sysMessage/delete?id=${id}`
        )
        .then((res) => {
          console.log(res);
          this.getSamplereport();
          window.location.reload();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查询列表
    async getGongYing() {
      this.loading = true; // 设置加载状态
      this.queryInfo._t = new Date().getTime(); // 防止缓存
      try {
        const { data: res } = await axios.get(
          "http://8.142.74.15:48082/jeecg-boot/message/sysMessage/list",
          {
            params: this.queryInfo,
          }
        );

        if (res.code !== 200) {
          this.$message.error("获取任务管理列表失败");
          return;
        }
        this.list = res.result.records; // 获取记录
        this.total = res.result.total; // 获取总数
      } catch (error) {
        console.error("Error fetching data:", error);
        this.$message.error("请求数据失败，请重试。");
      } finally {
        this.loading = false; // 取消加载状态
      }
    },
    // 分页器
    setPageSize(val) {
      this.queryInfo.pageSize = val;
      this.getGongYing();
    },
    setPageNo(val) {
      this.queryInfo.pageNo = val;
      this.getGongYing();
    },
    handleReset() {
      this.search1 = "";
      this.search2 = "";
      this.queryInfo.code = "";
      this.queryInfo.name = "";
      this.queryInfo.pageNo = 1;
      this.queryInfo.pageSize = 10;
      this.getGongYing(); // 重置后重新获取数据
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded; // 切换展开状态
    },
    // 处理表格行选择变化
    handleSelectionChange(selections) {
      this.selectedRows = selections;
      this.selectedCount = selections.length;
    },
    async batchDelete() {
      if (this.selectedRows.length === 0) {
        return;
      }
      const ids = this.selectedRows.map((row) => row.id);
      try {
        // 修改请求URL中的参数
        await axios.delete(
          `http://8.142.74.15:48082/jeecg-boot/message/sysMessage/deleteBatch?ids=${ids}`,
          {
            data: { ids: ids },
          }
        );
        this.$message.success("批量删除成功");
        this.getGongYing();
      } catch (error) {
        console.error("批量删除失败:", error);
        // 提供更详细的错误信息给用户
        if (error.response && error.response.status === 404) {
          this.$message.error("请求的资源不存在，批量删除失败");
        } else if (error.response && error.response.status === 500) {
          this.$message.error("服务器内部错误，批量删除失败");
        } else {
          this.$message.error("批量删除失败，请重试");
        }
      }
    },
  },
};
</script>

<style scoped>
.search-bar {
  height: 100%;
  margin: 0;
  padding: 8px 24px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  transition: all 0.3s;
  border-radius: 2px;
}

.search-bar p {
  display: block;
  line-height: 40px;
  width: 100%;
  height: 40px;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  margin-bottom: 15px;
  padding-left: 10px;
  border-radius: 3px;
}
.select-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.select-item {
  display: flex;
  align-items: center;
  padding: 0 12px;
  /* width: 384px; */
}

label {
  width: 150px;
  color: #000;
  margin-right: 8px;
}

.input-field {
  width: 335px;
  height: 22px;
  padding: 4px 11px;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  transition: border-color 0.3s; /* 边框颜色变化过渡 */
  outline: none; /* 移除默认轮廓 */
}

/* 输入框鼠标悬停效果 */
.input-field:hover {
  border-color: #409eff; /* 悬停时边框颜色 */
}

/* 输入框获得焦点时的样式 */
.input-field:focus {
  border-color: #409eff; /* 焦点时边框颜色 */
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5); /* 焦点时阴影 */
}

/* 按钮样式 */
.search-button,
.reset-button,
.toggle-button,
.submit-button {
  padding: 10px 15px; /* 内边距 */
  border-radius: 4px; /* 圆角 */
  transition: background-color 0.3s; /* 背景颜色变化过渡 */
}

/* 查询按钮 */
.search-button {
  background-color: #409eff; /* 主色调 */
  color: white; /* 字体颜色 */
  border: 1px solid #409eff;
  width: 82px;
  height: 32px;
  line-height: 12px;
}

/* 查询按钮悬停效果 */
.search-button:hover {
  background-color: #66b1ff; /* 悬停时背景色 */
  border-color: #66b1ff;
}

/* 重置按钮 */
.reset-button {
  background-color: #fff; /* 重置按钮背景 */
  color: rgba(0, 0, 0, 0.65); /* 字体颜色 */
  border: 1px solid #d9d9d9;
  width: 82px;
  height: 32px;
  line-height: 12px;
  margin-left: 8px;
  padding: 0 15px;
  transition: all 0.3s;
}

/* 重置按钮悬停效果 */
.reset-button:hover {
  background-color: #e6f7ff; /* 悬停时背景色 */
  border-color: #409eff;
  color: #409eff;
}

/* 提交按钮 */
.submit-button {
  background-color: #fff; /* 提交按钮背景 */
  color: rgba(0, 0, 0, 0.65); /* 字体颜色 */
  border: 1px solid #d9d9d9;
  width: 82px;
  height: 32px;
  line-height: 12px;
  margin-left: 8px;
  padding: 0 15px;
  transition: all 0.3s;
}

/* 提交按钮悬停效果 */
.submit-button:hover {
  background-color: #e6f7ff; /* 悬停时背景色 */
  border-color: #409eff;
  color: #409eff;
}

/* 图标样式 */
.search-button i,
.reset-button i,
.toggle-button i,
.submit-button i {
  margin-right: 5px; /* 图标与文本之间的间距 */
}
.toggle-button {
  border: none;
  background-color: #fff;
  color: #409eff;
}
/* xinzeng */
.xinzeng {
  display: flex;
  width: 300px;
  align-items: center;
}
.el-button {
  margin-right: 10px;
}
.el-button i {
  margin-right: 5px;
}
.shanchu:hover {
  background-color: #096ba0;
  color: #096dd9;
}
/* 展开内容的样式 */
/*.expand-content {
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        background-color: #f9f9f9;
      } */
</style>
